<template>
  <VueDraggable
    v-model="modelValue"
    :animation="300"
    handle=".icons .drag"
    :group="{ name: 'components', put: true }"
    :clone="cloneRule"
    chosen-class="comp_chosen"
  >
    <div
      v-for="item in modelValue"
      :key="item.id"
      class="comp-render_item"
      @click.stop="handleClickComp(item)"
      :class="{
        active: codeBuilderState.currentComp?.id === item.id,
        hide_border: hideBorder,
      }"
    >
      <div class="header">
        <!-- <div class="title" v-if="!item.isBlock">
          <span>{{ item.displayName }}</span>
        </div> -->
        <span class="icons" :class="{ hide_btn: hideBtn }">
          <ElIcon size="18" class="drag">
            <Rank />
          </ElIcon>
          <ElIcon size="18" @click.stop="handleDeleteComp(item)">
            <Close />
          </ElIcon>
        </span>
      </div>
      <component
        :is="getComponent(item)"
        :key="item.id"
        v-model="item.state.value"
        v-bind="getComponentProps(item)"
      >
      </component>
    </div>
  </VueDraggable>
</template>

<script setup>
import { inject } from "vue";
import { VueDraggable } from "vue-draggable-plus";
import { useCodeBuilderState } from "@/store/codeBuilder/codeBuilder";
defineOptions({
  name: "CompArea",
});
const codeBuilderState = useCodeBuilderState();
const modelValue = defineModel({ default: [] });
const hideBtn = inject("hideBtn");
const hideBorder = inject("hideBorder");
function handleClickComp(item) {
  if (codeBuilderState.currentComp?.id === item.id) {
    // codeBuilderState.setCurrentComp(null); // TODO: 是否设置null?
  } else {
    codeBuilderState.setCurrentComp(item);
  }
}

function handleDeleteComp(item) {
  codeBuilderState.removeComponent(item.id);
}

function cloneRule(e) {
  return e;
}

function getComponent(item) {
  // if (item.kind === "from") {
  //   item.state.label = item.displayName;
  //   return (_, { attrs }) =>
  //     h(
  //       ElFormItem,
  //       { label: item.state.label, prop: item.state.prop },
  //       {
  //         default: () => item.component(item.state, attrs),
  //       }
  //     );
  // }
  const com = item.component(item.state);
  return com;
}

function getComponentProps(item) {
  const props = {
    editors: item.editors,
  };
  if (item.isBlock) {
    props.children = item.children;
  }
  return props;
}
</script>

<style scoped>
.comp-render_item {
  position: relative;
  margin: 5px 0;
  border: 1px solid var(--border-color);
  padding: 10px;
}
.comp-render_item.hide_border {
  border: none;
}
.comp-render_item.el-card :deep(.el-card__body) {
  --el-card-padding: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.header .title {
  flex: 1;
  font-size: 14px;
}
.header .icons {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.icons.hide_btn {
  display: none;
}
.comp-render_item .actions {
  margin-left: auto;
}
.comp-render_item .actions .el-button {
  padding: 0px 10px;
  height: 20px;
}
/* .comp-render_item:hover  */
.comp-render_item.active {
  border: 1px solid var(--el-color-primary);
}
.el-form-item {
  margin-bottom: 0;
}
.comp_chosen {
  opacity: 0.5;
}
</style>
